<template>
     
     <el-form-item  :label="jmname"> 
        <!-- 普通输入框--> 
        <el-input v-if="type === 'text'"   type="text" v-model="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 数字输入框 -->
        <el-input v-else-if="type === 'num'" 
                  type="number" v-model="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 密码输入框 -->
        <el-input v-else-if="type === 'password'" 
                  type="password" v-model="modelValue" @input="onInput" :placeholder="placeholder" :disabled="disabled" />
        <!-- 多行输入框 -->
        <el-input v-else-if="type === 'textarea'" 
                  type="textarea" v-model="modelValue" @input="onInput"
                  :autosize="{minRows: 3, maxRows: 10}" :placeholder="placeholder" :disabled="disabled"></el-input>
        <!-- 日期 -->
        <el-date-picker v-else-if="type === 'date'" 
                        type="date" v-model="modelValue" @change="onInput"
                        value-format="YYYY-MM-DD" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
        <!-- 日期时间 -->
        <el-date-picker v-else-if="type === 'datetime'" 
                        type="datetime" v-model="modelValue" @change="onInput"
                        value-format="YYYY-MM-DD HH:mm:ss" :placeholder="placeholder" :disabled="disabled"></el-date-picker>
        <!-- 时间 -->
        <el-time-picker v-else-if="type === 'time'"
                        type="datetime" v-model="modelValue" @change="onInput"
                        value-format="HH:mm:ss" :placeholder="placeholder" :disabled="disabled"></el-time-picker>
        <!-- 滑块参数 -->
        <el-slider v-else-if="type === 'slider'" 
                   v-model="modelValue" @input="onInput" :disabled="disabled"></el-slider>
        <!-- 颜色输入 -->
        <div v-else-if="type === 'color'"
             style="line-height: 0;">
            <el-color-picker v-model="modelValue" @change="onInput" :disabled="disabled"></el-color-picker>
        </div>
        <!-- 评分组件 -->
        <div v-else-if="type === 'rate'"
             style="line-height: 0;">
            <el-rate v-model="modelValue" @change="onInput" show-text :disabled="disabled"></el-rate>
        </div>
 

        <!-- 备注信息 -->
        <span class="c-remark" v-if="remark">{{remark}}</span>
    </el-form-item>
</template>

<script>
 
export default {
  name: "JmInput", 
   props:{
		type: {
          default: 'text'  
        },
        // 标题 
        jmname: {},
        // 绑定值 
        modelValue: {},
        // 提示文字 
        placeholder: {},
        // 备注文字
        remark: {}, 
        // 是否禁用 
        disabled: {},
	},
    emits:['update:modelValue'],
     methods:{ 
        onInput($event) {
            // console.log($event);
            // this.$parent.modelValue=$event;
            //  $emit('update:modelValue', $event);
            // proxy.$emit('update:modelValue', $event);
            this.$emit('update:modelValue', $event);
            // this.$emit('modelValue', $event);
        },
         
    },
};	
 

 
</script>

<style scoped>

</style>
